<template>
  <view>
    <TnNavbar fixed back-icon="" home-icon="" :center="false">
      <view class="tn-pl-sm tn-pr-xs tn-flex items-center justify-between" style="height: 100%;position: relative">
        <image @click="showPopup = !showPopup" :src="pmAvatar" style="width: 65rpx; height: 65rpx;border-radius: 100%"></image>
        <input
            style="
              border: 1px solid #eee;
              height: 65rpx;
              border-radius: 65rpx;
              width: calc(100% - 75rpx);
              padding: 0 70rpx 0 50rpx;
            "
            placeholder="名称/ID,点头像筛选更多"
            confirm-type="search"
            @confirm="search"
            v-model="where.name"
        >
        <tn-icon name="search" style="position: absolute;left: 110rpx; top: 50%; transform: translateY(-50%)"></tn-icon>
      </view>
    </TnNavbar>
    <TnPopup v-model="showPopup" open-direction="top">
      <view :style="{paddingTop: height + 10 + 'px'}" style="position: relative;">
        <swiper style="height: 450px;width: 100%"  @change="cardSwiper" :circular="true">
          <swiper-item>
            <view class="cu-bar">
              <view class="action sub-title">
                <text class="text-xl text-bold text-blue">刻印排序</text>
                <text class="text-ABC text-blue">sort</text>
              </view>
            </view>
            <view class="flex flex-wrap">
              <button
                  class="text-sm margin-bottom-sm"
                  :class="item.order === where.order && item.sort === where.sort ? 'bg-blue' : 'bg-blue light'"
                  style="width: 22%"
                  v-for="item in filterList"
                  @click="chooseFilter(item)"
              >
                {{ item.name }}
              </button>
              <button
                  v-for="item in (4 - filterList.length%4)"
                  class="text-sm margin-bottom-sm"
                  style="width: 22%;opacity: 0"
              >
              </button>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="cu-bar">
              <view class="action sub-title">
                <text class="text-xl text-bold text-blue">刻印系列</text>
                <text class="text-ABC text-blue">kind</text>
              </view>
            </view>
            <scroll-view scroll-y style="height: 400px">
              <view class="padding-lr-sm tn-flex tn-flex-wrap">
                <button
                    class="text-sm margin-bottom-sm"
                    :class="where.mintmark_class === 0 ? 'bg-blue' : 'bg-blue light'"
                    style="width: 32%"
                    @click="() => {
                      where.mintmark_class = 0
                      search()
                    }"
                >
                    全部
                </button>
                <button
                    class="text-sm margin-bottom-sm"
                    :class="where.mintmark_class === item.id ? 'bg-blue' : 'bg-blue light'"
                    style="width: 32%"
                    v-for="item in mintmarkClass"
                    @click="() => {
                      where.mintmark_class = item.id
                      search()
                    }"
                >
                  {{ item.class_name }}
                </button>
                <button
                    v-for="item in (3 - (mintmarkClass.length + 1)%3)"
                    class="text-sm margin-bottom-sm"
                    style="width: 32%;opacity: 0"
                >
                </button>
              </view>
            </scroll-view>
          </swiper-item>
          <swiper-item>
            <view class="cu-bar">
              <view class="action sub-title">
                <text class="text-xl text-bold text-blue">刻印角数</text>
                <text class="text-ABC text-blue">number</text>
              </view>
            </view>
            <scroll-view scroll-y style="height: 400px">
              <view class="padding-lr-sm tn-flex tn-flex-wrap">
                <button
                    class="text-sm margin-bottom-sm"
                    :class="where.quality === item.value ? 'bg-blue' : 'bg-blue light'"
                    style="width: 32%"
                    v-for="item in mintmarkQuality"
                    @click="() => {
                      where.quality = item.value
                      search()
                    }"
                >
                  {{ item.name }}
                </button>
                <button
                    class="text-sm margin-bottom-sm"
                    style="width: 32%;opacity: 0"
                >
                </button>
              </view>
            </scroll-view>
          </swiper-item>
        </swiper>
        <view class="indication">
          <block v-for="(item,index) in 3" :key="index">
            <image class="spot" src="/static/title1.png" v-if="cardCur===index"></image>
            <image class="spot" src="/static/title.png" v-else></image>
          </block>
        </view>
      </view>
    </TnPopup>
    <scroll-view
        scroll-y
        :style="{height: `calc(100vh - ${height + safeBottom + 70}px)`}"
        :scroll-into-view="topItem"
        scroll-with-animation
        @scroll="handleScroll"
    >
      <view id="top"></view>
      <view class="tn-flex tn-flex-wrap">
        <template v-for="item in mintmarkList">
          <view style="width: 25%" class="tn-p-sm tn-flex tn-flex-column justify-center items-center" @click="gotoDetail(item)">
            <view>
              <image :src="item.url" style="width: 50px;height: 50px"/>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis-1">{{ item.des }}</text>
            </view>
          </view>
        </template>
      </view>
      <view class="back" :style="{display: scrollTop > 500 ? 'flex' : 'none'}" @click.stop="scrollToTop">
        <TnIcon name="totop-simple" style="font-size: 25px"/>
      </view>
      <view class="tn-flex-center">
        <TnButton text @click="loadMore" debounce :disabled="showLoading">
          {{ status === 'loadmore' ? '点击加载更多' : status === 'loading' ? '正在加载' : '到底啦~' }}
        </TnButton>
      </view>
    </scroll-view>
    <view class="cu-modal" :class=" showDetail ? 'show' : ''" @click="showDetail = false">
      <view class="cu-dialog tn-text-left" @click.stop="" v-if="current" style="background-color: #182f4d">
        <view class="tn-p-sm flex justify-between">
          <view>
            <image src="/static/title.png" style="width: 10px;height: 10px"></image>
            <text style="color: #b7cdfe;margin-left: 5px">{{ current.des }} (ID: {{ current.id }})</text>
          </view>
          <TnIcon name="close" color="#b7cdfe" @click="showDetail = false"></TnIcon>
        </view>
        <view class="tn-p-sm" style="color: #b7cdfe">
          <text class="tn-text-bold">{{ current.type === 0 ? '能力刻印' : current.type === 1 ? '技能刻印' : '全能刻印' }}</text>
          <view class="tn-flex tn-flex-wrap">
            <view class="tn-p-sm" style="width: 33%" v-for="item in current.real_effect_des">
              <text class="tn-mr-xs">{{ item.name }}:</text>
              <text>{{ item.value }}</text>
            </view>
          </view>
        </view>
        <view class="tn-pl-sm tn-pr-sm tn-flex items-center">
          <view style="width: 100%;height: 1px; border-bottom: 1px solid #b7cdfe"></view>
        </view>
        <view class="tn-p-sm" style="color: #b7cdfe">
          <template v-if="current.real_extra_attri_value.length > 0">
            <text class="tn-text-bold">隐藏属性</text>
            <view class="tn-flex tn-flex-wrap">
              <view class="tn-p-sm" style="width: 25%" v-for="item in current.real_extra_attri_value">
                <text class="tn-mr-xs">{{ item.name }}:</text>
                <text>{{ item.value }}</text>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="tn-text-center tn-text-bold">无隐藏属性</view>
          </template>
        </view>
        <view class="tn-pl-sm tn-pr-sm tn-flex items-center">
          <view style="width: 100%;height: 1px; border-bottom: 1px solid #b7cdfe"></view>
        </view>
        <view class="tn-p-sm" style="color: #b7cdfe">
          <template>
            <text class="tn-text-bold">刻印总和</text>
            <view class="tn-flex tn-flex-wrap">
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">总和:</text>
                <text>{{ current.all_data }}</text>
              </view>
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">攻速体:</text>
                <text>{{ current.atk_speed_power }}</text>
              </view>
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">攻速:</text>
                <text>{{ current.atk_speed }}</text>
              </view>
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">攻体:</text>
                <text>{{ current.atk_power }}</text>
              </view>
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">攻盾体:</text>
                <text>{{ current.atk_defense_power }}</text>
              </view>
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">攻盾:</text>
                <text>{{ current.atk_defense }}</text>
              </view>
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">盾体:</text>
                <text>{{ current.defense_power }}</text>
              </view>
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">速盾体:</text>
                <text>{{ current.speed_defense_power }}</text>
              </view>
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">速盾:</text>
                <text>{{ current.speed_defense }}</text>
              </view>
              <view class="tn-p-sm" style="width: 33%">
                <text class="tn-mr-xs">速体:</text>
                <text>{{ current.speed_power }}</text>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
    <loading-page :show="showLoading" @click.stop=""/>
  </view>
</template>

<script setup>
  import TnIcon from '../../../uni_modules/tuniaoui-vue3/components/icon/src/icon.vue';
  import TnNavbar from '../../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue';
  import TnButton from '../../../uni_modules/tuniaoui-vue3/components/button/src/button.vue';
  import TnPopup from '../../../uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
  import LoadingPage from '../../../components/loadingPage.vue';
  import {useUniAppSystemRectInfo} from '../../../uni_modules/tuniaoui-vue3/hooks/use-uniapp-system-rect-info';
  import {getCurrentInstance, onMounted, ref, nextTick, computed, reactive} from 'vue';

  const {
    proxy
  } = getCurrentInstance()

  const pmAvatar = __wxConfig.accountInfo.icon

  const showLoading = ref(false)

  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)

  // 初始数据
  const mintmarkList = ref([])
  const totalPages = ref(0)
  // 刻印系列
  const mintmarkClass = ref([])
  // 查询条件
  let where = reactive({
    page: 1,
    limit: 100,
    name: '',
    quality: 0,
    type: 0,
    mintmark_class: 0,
    sort: 'id',
    order: 'desc'
  })
  const getList = async () => {
    showLoading.value = true;
    if (where.page === 1) {
      ({records: mintmarkList.value, pages: totalPages.value} = await proxy.$api.getCounterMarkQuery(where))
    } else {
      const {records} = await proxy.$api.getCounterMarkQuery(where)
      mintmarkList.value.push(...records)
    }
    showLoading.value = false
  }

  // 触底触发
  const loadMore = async () => {
    if (status.value !== 'loadmore') return
    where.page++
    await getList()
  }

  // 滚动触发
  const scrollTop = ref(0)
  const topItem = ref('')
  const handleScroll = (ev) => {
    scrollTop.value = ev.detail.scrollTop
    topItem.value = ''
  }

  // 返回顶部
  const scrollToTop = () => {
    nextTick(() => {
      topItem.value = 'top'
      scrollTop.value = 0
    })
  }

  // 显示搜索弹窗
  const showPopup = ref(false)

  const chooseFilter = (item) => {
    where.sort = item.sort
    where.order = item.order
    search()
  }

  const mintmarkQuality = ref([{
    name: '全部',
    value: 0
  }, {
    name: '五角',
    value: 5
  }, {
    name: '四角',
    value: 4
  }, {
    name: '三角',
    value: 3
  }, {
    name: '二角',
    value: 2
  }])

  const filterList = ref([{
    name: '总和↑',
    order: 'asc',
    sort: 'all_data'
  }, {
    name: '总和↓',
    order: 'desc',
    sort: 'all_data'
  }, {
    name: '攻击↑',
    order: 'asc',
    sort: 'real_atk'
  }, {
    name: '攻击↓',
    order: 'desc',
    sort: 'real_atk'
  }, {
    name: '特攻↑',
    order: 'asc',
    sort: 'real_sp_atk'
  }, {
    name: '特攻↓',
    order: 'desc',
    sort: 'real_sp_atk'
  }, {
    name: '防御↑',
    order: 'asc',
    sort: 'real_def'
  }, {
    name: '防御↓',
    order: 'desc',
    sort: 'real_def'
  }, {
    name: '特防↑',
    order: 'asc',
    sort: 'real_sp_def'
  }, {
    name: '特防↓',
    order: 'desc',
    sort: 'real_sp_def'
  }, {
    name: '速度↑',
    order: 'asc',
    sort: 'real_speed'
  }, {
    name: '速度↓',
    order: 'desc',
    sort: 'real_speed'
  }, {
    name: '体力↑',
    order: 'asc',
    sort: 'real_power'
  }, {
    name: '体力↓',
    order: 'desc',
    sort: 'real_power'
  }, {
    name: '攻速体↑',
    order: 'asc',
    sort: 'atk_speed_power'
  }, {
    name: '攻速体↓',
    order: 'desc',
    sort: 'atk_speed_power'
  }, {
    name: '攻速↑',
    order: 'asc',
    sort: 'atk_speed'
  }, {
    name: '攻速↓',
    order: 'desc',
    sort: 'atk_speed'
  }, {
    name: '攻体↑',
    order: 'asc',
    sort: 'atk_power'
  }, {
    name: '攻体↓',
    order: 'desc',
    sort: 'atk_power'
  }, {
    name: '攻盾体↑',
    order: 'asc',
    sort: 'atk_defense_power'
  }, {
    name: '攻盾体↓',
    order: 'desc',
    sort: 'atk_defense_power'
  }, {
    name: '攻盾↑',
    order: 'asc',
    sort: 'atk_defense'
  }, {
    name: '攻盾↓',
    order: 'desc',
    sort: 'atk_defense'
  }, {
    name: '盾体↑',
    order: 'asc',
    sort: 'defense_power'
  }, {
    name: '盾体↓',
    order: 'desc',
    sort: 'defense_power'
  }, {
    name: '速盾体↑',
    order: 'asc',
    sort: 'speed_defense_power'
  }, {
    name: '速盾体↓',
    order: 'desc',
    sort: 'speed_defense_power'
  }, {
    name: '速盾↑',
    order: 'asc',
    sort: 'speed_defense'
  }, {
    name: '速盾↓',
    order: 'desc',
    sort: 'speed_defense'
  }, {
    name: '速体↑',
    order: 'asc',
    sort: 'speed_power'
  }, {
    name: '速体↓',
    order: 'desc',
    sort: 'speed_power'
  }, {
    name: 'ID↑',
    order: 'asc',
    sort: 'id'
  }, {
    name: 'ID↓',
    order: 'desc',
    sort: 'id'
  }])

  // 搜索
  const search = async () => {
    where.page = 1
    showPopup.value = false
    await getList()
  }

  const status = computed(() => {
    if (showLoading.value) {
      return 'loading'
    } else if (mintmarkList.value.length < 100) {
      return 'nomore'
    } else if (where.page < totalPages.value) {
      return 'loadmore'
    } else {
      return 'nomore'
    }
  })

  // 显示详情
  const showDetail = ref(false)
  const current = ref(null)
  const gotoDetail = (item) => {
    showDetail.value = true
    current.value = item
  }

  const cardCur = ref(0)
  const cardSwiper = (e) => {
    cardCur.value = e.detail.current
  }

  onMounted(async () => {
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
    await getList();
    mintmarkClass.value = await proxy.$api.getMintmarkList()
  })
</script>

<style scoped lang="scss">
  .more {
    position: fixed;
    right: 5px;
    bottom: 50px;
    z-index: 10001;

    .map {
      width: 50px;
      height: 50px;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #01beff;
      color: #fff;
    }
  }

  .back {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .4);
    color: #fff;
    position: fixed;
    right: 5px;
    bottom: 120px;
    z-index: 10001;
  }

  .module:after {
    content: "";
    display: block;
    width: 32%;
    height: 0;
  }

  .indication {
    z-index: 11;
    width: 100%;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .spot {
    // background-color: #FBBD12;
    opacity: 0.8;
    width: 20rpx;
    height: 20rpx;
    margin: 0 10rpx !important;
    left: 0;
    top: 0;
    position: relative;
    z-index: 12;
  }
</style>
